<script setup>
import Profile from './Home components/Profile.vue';
import { Picture } from '@element-plus/icons-vue'
import HomePageFooter from '@/views/Front/Home components/HomePageFooter.vue'
const images = [
  { id: 1, title: '好久不见', url: '/placeholder.svg?height=300&width=300' },
  { id: 2, title: '0419随便画画2', url: '/placeholder.svg?height=300&width=300' },
  { id: 3, title: '0419随便画画3', url: '/placeholder.svg?height=300&width=300' },
  { id: 4, title: '0419随便画画4', url: '/placeholder.svg?height=300&width=300' },
  { id: 5, title: '0419随便画画5', url: '/placeholder.svg?height=300&width=300' },
  { id: 6, title: '0419随便画画6', url: '/placeholder.svg?height=300&width=300' },
  { id: 7, title: '0419随便画画7', url: '/placeholder.svg?height=300&width=300' },
  { id: 8, title: '0419随便画画8', url: '/placeholder.svg?height=300&width=300' },
  { id: 9, title: '0419随便画画9', url: '/placeholder.svg?height=300&width=300' },
  { id: 10, title: '0419随便画画10', url: '/placeholder.svg?height=300&width=300' },
  { id: 11, title: '0419随便画画11', url: '/placeholder.svg?height=300&width=300' },
  { id: 12, title: '0419随便画画12', url: '/placeholder.svg?height=300&width=300' },
  { id: 13, title: '0419随便画画13', url: '/placeholder.svg?height=300&width=300' },
  { id: 14, title: '0419随便画画14', url: '/placeholder.svg?height=300&width=300' },
  { id: 15, title: '0419随便画画15', url: '/placeholder.svg?height=300&width=300' },
  { id: 16, title: '0419随便画画16', url: '/placeholder.svg?height=300&width=300' },
  { id: 17, title: '0419随便画画17', url: '/placeholder.svg?height=300&width=300' },
  { id: 18, title: '0419随便画画18', url: '/placeholder.svg?height=300&width=300' },
  { id: 19, title: '0419随便画画19', url: '/placeholder.svg?height=300&width=300' },
  { id: 20, title: '0419随便画画20', url: '/placeholder.svg?height=300&width=300' },
  { id: 21, title: '0419随便画画21', url: '/placeholder.svg?height=300&width=300' },
  { id: 22, title: '0419随便画画22', url: '/placeholder.svg?height=300&width=300' },
  { id: 23, title: '0419随便画画23', url: '/placeholder.svg?height=300&width=300' },
  { id: 24, title: '0419随便画画24', url: '/placeholder.svg?height=300&width=300' },
  { id: 25, title: '0419随便画画25', url: '/placeholder.svg?height=300&width=300' }
];
</script>
<template>
  <div class="gallery-view-container">
    <div class="gallery-view">
      <div class="gallery-view-left">
        <Profile/>
        <el-card class="gallery-view-pixiv" shadow="never" :body-style="{ padding: '15px 0 0 0', height: '100%' }">  
          我还没想好这里放啥
        </el-card>
      </div>
      <div class="gallery-view-right">
        <div class="gallery-view-search">
          <el-input placeholder="搜索图片" v-model="searchText" clearable />
        </div>
        <div class="gallery-view-gallery">
          <el-card
            v-for="image in images"
            :key="image.id"
            class="image-card"
            :body-style="{ padding: '0px' }"
            shadow="never"
          >
            <div class="card-content">
              <el-image
                :src="image.url"
                fit="cover"
                class="gallery-image"
                loading="lazy"
              >
                <template #placeholder>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="image-info">
                <span class="image-title">{{ image.title }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <HomePageFooter/>
  </div>
</template>
<style scoped>
.gallery-view-container {
  margin: 80px 20vw 0 20vw;
  /* background-color: #99e4ff; */
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.gallery-view {
  height: auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  margin-bottom: 20px;
}

.gallery-view-left {
  width: 20%;
  height: 100%;

  .gallery-view-pixiv {
    margin: 10px 0 0 0;
    border: none;
    background-color: rgb(83, 82, 85);
    height: 250px;
  }
}

.gallery-view-right {
  margin-left: 15px;
  width: 80%;
  height: auto;
  background-color: aqua;

  .gallery-view-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    height: 100%;
  }
}
</style>